<template>
    <div class="v-slider">
        <div class="block">
            <span class="demonstration lf">{{ msgText }}</span>
            <el-slider class="lf" v-model="val" @change="change"></el-slider>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'v-slider',
        props: {
            msgText: {
                type: String,
                default: '全量'
            },
            value: {
                type: Number,
                default: 100
            }
        },
        data () {
            return {
                val: ''
            }
        },
        methods: {
            change (value) {
                this.$emit('on-change', value)
            }
        },
        created () {
            this.val = this.value
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .v-slider
        .block
            overflow hidden
            .demonstration
                margin-right 15px
                position relative
                top 8px
            .el-slider
                width 90px
</style>
